<template>
    <div class="index">
        <header>
            <h1>大屏可视化</h1>
            <div class="times">
                    {{date}}
            </div>
        </header>
        <section>
            <div class="left">
                <echartsCard :width="'25vw'" :height="'30vh'">
                    <template v-slot:title>
                        <h3>
                            新增确诊TOP10
                        </h3>
                    </template>
                    <template v-slot:section>
                       <div id="main" style="width:96%;height:100%"></div>
                    </template>
                </echartsCard>
                 <echartsCard :width="'25vw'" :height="'30vh'">
                    <template v-slot:title>
                        <h3>
                            大洲感染总人数趋势图
                        </h3>
                    </template>
                    <template v-slot:section>
                       <div id="main2" style="width:96%;height:100%"></div>
                    </template>
                </echartsCard>
                  <echartsCard :width="'25vw'" :height="'30vh'">
                    <template v-slot:title>
                        <h3>
                            大洲感染人数饼状图
                        </h3>
                    </template>
                    <template v-slot:section>
                       <div id="main3" style="width:96%;height:100%"></div>
                    </template>
                </echartsCard>
            </div>
            <div class="middle">
                <img class="map" src="../assets/image/map.png" alt="">
                <img class="lbx" src="../assets/image/lbx.png" alt="">
                <img class="jt" src="../assets/image//jt.png" alt="">
                <div class="top-box">
                    <div class="top">
                    <echartsCard :width="'46vw'" :height="'10vh'">
                        <template v-slot:title><span></span></template>
                        <template v-slot:section>
                            <ol>
                                <li>0000000</li>
                                <li>0000000</li>
                                <li>0000000</li>
                                <li>0000000</li>
                            </ol>
                        </template>
                    </echartsCard>
                </div>
                </div>
                <div id="map" style="width:50vw;height:60vh"></div>
            </div>
            <div class="right">
                 <echartsCard :width="'25vw'" :height="'30vh'">
                    <template v-slot:title>
                        <h3>
                            主要疫情国家治愈率
                        </h3>
                    </template>
                    <template v-slot:section>
                       <div id="main4" style="width:96%;height:100%"></div>
                    </template>
                </echartsCard>
                 <echartsCard :width="'25vw'" :height="'30vh'">
                    <template v-slot:title>
                        <h3>
                            世界每周新增治愈和死亡人数
                        </h3>
                    </template>
                    <template v-slot:section>
                       <div id="main5" style="width:96%;height:100%"></div>
                    </template>
                </echartsCard>
                 <echartsCard :width="'25vw'" :height="'30vh'">
                    <template v-slot:title>
                        <h3>
                            境外输入病情top10省份
                        </h3>
                    </template>
                    <template v-slot:section>
                       <div id="main6" style="width:96%;height:100%"></div>
                    </template>
                </echartsCard>
            </div>
        </section>
    </div>
</template> 
<script>
import echartsCard from '@/components/echartsCard';
import * as echarts from 'echarts';
import $ from 'jquery';
export default {
    components:{
        echartsCard,
    },
    data() {
        return {
            date:new Date().toLocaleString(),
            newTop10:[],
            allBigContinent:[],
            foreignList:[],
            globalDailyHistory:[],
            importStatis:[],
        }
    },
    mounted() {
        this.getData();
        this.times();
            var myChart = echarts.init(document.getElementById('main'));
            var myChart2 = echarts.init(document.getElementById('main2'));
            var myChart3 = echarts.init(document.getElementById('main3'));
            var myChart4 = echarts.init(document.getElementById('main4'));
            var myChart5 = echarts.init(document.getElementById('main5'));
            var myChart6 = echarts.init(document.getElementById('main6'));
            var myMap = echarts.init(document.getElementById('map'));
        window.addEventListener("resize", function () {
                 myChart.resize()
                 myChart2.resize()
                 myChart3.resize()
                 myChart4.resize()
                 myChart5.resize()
                 myChart6.resize()
                 myMap.resize();
        })
    },
    methods: {
        // 地图
        getMap(url){
            var p = new Promise((resolve, reject) => {
                $.ajax({
                    type: 'get',
                    // https://geo.datav.aliyun.com/areas_v3/bound/210000_full.json
                    url: url,
                    dataType: 'json',
                    success: function(res) {
                        resolve(res)
                        // console.log(res,128);
                    }
                })
            })
            p.then((res)=>{
                console.log(res,137137);
                echarts.registerMap('china', res);
                var myChart = echarts.init(document.getElementById('map'));
                window.dataList = [{
                        name: "南海诸岛",
                        value: 0
                    },
                    {
                        name: '北京市',
                        value: 54
                    },
                    {
                        name: '天津市',
                        value: 13
                    },
                    {
                        name: '上海市',
                        value: 40                    
                        },
                    {
                        name: '重庆市',
                        value: 75
                    },
                    {
                        name: '河北省',
                        value: 13
                    },
                    {
                        name: '河南省',
                        value: 83
                    },
                    {
                        name: '云南省',
                        value: 11
                    },
                    {
                        name: '辽宁省',
                        value: 19
                    },
                    {
                        name: '黑龙江省',
                        value: 15
                    },
                    {
                        name: '湖南省',
                        value: 69
                    },
                    {
                        name: '安徽省',
                        value: 60
                    },
                    {
                        name: '山东省',
                        value: 39
                    },
                    {
                        name: '新疆维吾尔自治区',
                        value: 4
                    },
                    {
                        name: '江苏省',
                        value: 31
                    },
                    {
                        name: '浙江省',
                        value: 104
                    },
                    {
                        name: '江西省',
                        value: 36
                    },
                    {
                        name: '湖北省',
                        value: 1052
                    },
                    {
                        name: '广西壮族自治区',
                        value: 33
                    },
                    {
                        name: '甘肃省',
                        value: 7
                    },
                    {
                        name: '山西省',
                        value: 9
                    },
                    {
                        name: '内蒙古自治区',
                        value: 7
                    },
                    {
                        name: '陕西省',
                        value: 22
                    },
                    {
                        name: '吉林省',
                        value: 4
                    },
                    {
                        name: '福建省',
                        value: 18
                    },
                    {
                        name: '贵州省',
                        value: 5
                    },
                    {
                        name: '广东省',
                        value: 98
                    },
                    {
                        name: '青海省',
                        value: 1
                    },
                    {
                        name: '西藏自治区',
                        value: 0
                    },
                    {
                        name: '四川省',
                        value: 44
                    },
                    {
                        name: '宁夏回族自治区',
                        value: 4
                    },
                    {
                        name: '海南省',
                        value: 22
                    },
                    {
                        name: '台湾省',
                        value: 3
                    },
                    {
                        name: '香港省',
                        value: 5
                    },
                    {
                        name: '澳门省',
                        value: 5
                    }
                ];
                var option = {
                      tooltip: {
                        triggerOn: "click",
                        formatter: function(e, t, n) {
                            console.log(e);
                            // url = 'https://geo.datav.aliyun.com/areas_v3/bound/210000_full.json'
                            return .5 == e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.value
                        }
                    },
                    visualMap: {
                        min: 0,
                        max: 1000,
                        left: 26,
                        top: 0,
                        showLabel: !0,
                        text: ["高", "低"],
                        textStyle:{
                            color:"#fff"
                        },
                        pieces: [{
                            gt: 100,
                            label: "> 100 人",
                            color: "#FFA500"
                        }, {
                            gte: 10,
                            lte: 100,
                            label: "10 - 100 人",
                            color: "#FFDEAD"
                        }, {
                            gte: 1,
                            lt: 10,
                            label: "1 - 9 人",
                            color: "#FFEBAD"
                        }, {
                            gt: 0,
                            lt: 1,
                            label: "疑似",
                            color: "#FDF5E6"
                        }, {
                            value: 0,
                            color: "#ffffff"
                        }],
                        show: !0
                    },
                    geo: {
                        map: "china",
                        roam: !1,
                        scaleLimit: {
                            min: 1,
                            max: 2
                        },
                        zoom: 1.23,
                        top: 120,
                        label: {
                            normal: {
                                show: !0,
                                fontSize: "10",
                                color: "rgba(0,0,0,0.7)"
                            }
                        },
                        itemStyle: {
                            normal: {
                                //shadowBlur: 50,
                                shadowColor: 'rgba(0, 0, 0, 0.2)',
                                // areaColor: 'rgba(128, 128, 128, 0)', 
                                borderColor: "rgba(0, 0, 0, 0.2)"
                            },
                            emphasis: {
                                areaColor: "#f2d5ad",
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                borderWidth: 0
                            }
                        }
                    },
                    series: [{
                        name: "确诊病例",
                        type: "map",
                        map:"china",
                        geoIndex: 0,
                        data: window.dataList
                    }]
                };
                myChart.setOption(option);
                  
            })
        },
        times(){
                clearInterval('times');
            var times = setInterval(() => {
                this.date = new Date().toLocaleString();
                // console.log(this.date,date);
            }, 1000);
        },
        getData(){
            var p = new Promise((resolve, reject) => {
                    $.ajax({
                    type: 'get',
                    url: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign',
                    dataType: 'jsonp',
                    success: function(res) {
                            // console.log(res);
                            var data = JSON.parse(res.data);
                            // console.log(data);
                            resolve(data);
                            // this.newTop10 = data.countryAddConfirmRankList;
                    },
                    fail:(err)=>{
                        console.log(err);
                    }
                })
            });
            p.then((res)=>{
                console.log(res);
                this.newTop10 = res.countryAddConfirmRankList;
                this.allBigContinent = res.continentStatis;
                this.foreignList = res.foreignList;
                this.globalDailyHistory = res.globalDailyHistory;
                this.importStatis = res.importStatis.TopList;
                // console.log( this.newTop10);
                this.getFirst();
                this.getSecond();
                this.getThr();
                this.getFour();
                this.getFive();
                this.getSix();
                this.getMap('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json');
            })
        },
        // 新增确诊前十
        getFirst(){
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var nation=[];
            var addConfirm=[];
            this.newTop10.forEach((item) => {
                nation.push(item.nation);
                addConfirm.push(item.addConfirm);
            })
                // console.log(nation,addConfirm,88);
            var option = {
                    tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                    },
                    grid: {
                    left: '2%',
                    right: '4%',
                    bottom: '14%',
                    top:'16%',
                    containLabel: true
                    },
                    xAxis: {
                    type: 'category',
                    data: nation,
                    axisLine: {
                        lineStyle: {
                        color: 'white'
                        }
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 40,
                        fontSize: 10,
                        color: "rgba(255,255,255,.6) ",
                        // textStyle: {
                        // fontFamily: 'Microsoft YaHei'
                        // },
                    },
                    },
                    yAxis: {
                    type: 'value',
                    // max:'1200',
                    axisLine: {
                        show: false,
                        lineStyle: {
                        color: 'white'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                        color: 'rgba(255,255,255,0.3)'
                        }
                    },
                    axisLabel: {}
                    },
                    series: [{
                    name: '3',
                    type: 'bar',
                    barWidth: '25%',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#248ff7'
                            }, {
                                offset: 1,
                                color: '#6851f1'
                            }]),
                        barBorderRadius: 11,
                        }
                    },
                    data: addConfirm
                    }]
                };
            myChart.setOption(option);
        },    
        getList(date,city){
            this.allBigContinent.forEach((item) => {
                date.push(item.date);
                // 循环获取键
                for(var i in item.statis){
                        // console.log(i,item.statis[i]);
                        if(city[i] == undefined){
                            city[i] = [];
                        }
                        city[i].push(item.statis[i])
                }
            })
        },
        // 大洲确诊
        getSecond(){
            var myChart2 = echarts.init(document.getElementById('main2'));
            var date = [];
            var city = {};
            this.getList(date,city);
            // console.log(city);
            var options = {
                tooltip: {
                    trigger: 'axis',
                    // backgroundColor:'rgba(255,255,255,0.1)',
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            show: true,
                            backgroundColor: '#7B7DDC'
                        }
                    }
                },
                legend: {
                    data: ['亚洲','其他','北美洲','南美洲','大洋洲','欧洲','非洲'],
                    textStyle: {
                        color: '#B4B4B4'
                    },
                    top:'7%',
                },
                grid:{
                    x:'20%',
                    width:'82%',
                    height:'50%',
                    // y:'20%',
                },
                xAxis: {
                    data: date,
                    axisLine: {
                        lineStyle: {
                            color: '#B4B4B4'
                        }
                    },
                    axisTick:{
                        show:false,
                    },
                },
                  yAxis: [{
                    // splitLine: {show: true,color:'#F02FC2',},
                    axisLine: {
                        lineStyle: {
                            color: '#B4B4B4',
                        },
                    },
                    // axisLabel:{
                    //     formatter:'{value} ',
                    // },
                    data:[10000000,20000000,30000000,40000000,50000000]
                },
                    {
                    data:[],
                }],
                 series: [{
                    name: '亚洲',
                    type: 'line',
                    smooth: true,
                    showAllSymbol: true,
                    symbol: 'emptyCircle',
                    symbolSize: 4,
                    yAxisIndex: 1,
                    itemStyle: {
                            normal: {
                            color:'#F02FC2'},
                    },
                    data: city.亚洲
                },
                {
                    name: '其他',
                    type: 'line',
                    smooth: true,
                    showAllSymbol: true,
                    symbol: 'emptyCircle',
                    symbolSize: 4,
                    yAxisIndex: 1,
                    itemStyle: {
                            normal: {
                            color:'#6A5ACD'},
                    },
                    data: city.其他
                },
                {
                    name: '北美洲',
                    type: 'line',
                    smooth: true,
                    showAllSymbol: true,
                    symbol: 'emptyCircle',
                    symbolSize: 4,
                    yAxisIndex: 1,
                    itemStyle: {
                            normal: {
                            color:'#BA55D3'},
                    },
                    data: city.北美洲
                },
                {
                    name: '南美洲',
                    type: 'line',
                    smooth: true,
                    showAllSymbol: true,
                    symbol: 'emptyCircle',
                    symbolSize: 4,
                    yAxisIndex: 1,
                    itemStyle: {
                            normal: {
                            color:'#1E90FF'},
                    },
                    data: city.南美洲
                },
                {
                    name: '大洋洲',
                    type: 'line',
                    smooth: true,
                    showAllSymbol: true,
                    symbol: 'emptyCircle',
                    symbolSize: 4,
                    yAxisIndex: 1,
                    itemStyle: {
                            normal: {
                            color:'#F08080'},
                    },
                    data: city.大洋洲
                },
                {
                    name: '欧洲',
                    type: 'line',
                    smooth: true,
                    showAllSymbol: true,
                    symbol: 'emptyCircle',
                    symbolSize: 4,
                    yAxisIndex: 1,
                    itemStyle: {
                            normal: {
                            color:'#FFA500'},
                    },
                    data: city.欧洲
                },
                {
                    name: '非洲',
                    type: 'line',
                    smooth: true,
                    showAllSymbol: true,
                    symbol: 'emptyCircle',
                    symbolSize: 4,
                    yAxisIndex: 1,
                    itemStyle: {
                            normal: {
                            color:'#00FA9A'},
                    },
                    data: city.非洲
                }]
            }
            myChart2.setOption(options);
        },
        // 大洲感染人数饼状图
        getThr(){
            var myChart = echarts.init(document.getElementById('main3'));
            // console.log(num,sum);
            var echartData = [{
                value: 25223,
                name: '欧洲'
            },  {
                value: 5307,
                name: '北美洲'
            }]
            var option = {  
                legend: {
                    icon: "circle",
                    orient: 'horizontal',
                    x: 'center',
                    top:'7%',
                    data:['北美洲','欧洲'],
                    right: 340,
                    bottom: 150,
                    align: 'right',
                    textStyle: {
                    color: "#fff"
                    },
                    itemGap: 20
                },
                series: [{
                    type: 'pie',
                    radius: ['40%', '50%'],
                    hoverAnimation: false,
                    color: ['#c487ee', '#00ffb4'],
                    data: echartData
                }]
            };
            myChart.setOption(option);
        },
        // 主要疫情国家治愈率
        getFour(){
            var myChart = echarts.init(document.getElementById('main4'));
            var nation = [];
            var addConfirm = [];
            this.foreignList.forEach(item=>{
                if(addConfirm.length < 7){
                nation.unshift(item.name);
                addConfirm.unshift(item.confirm == 0 ? "100%" : Math.round((item.heal / item.confirm) * 10000) / 100.0 );
                }
                // console.log();
            })
            console.log(addConfirm);
            // console.log(addConfirm,nation,962);
            var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC'];
            var option = {
                grid: {
                    top: '2%',
                    left: '7%',
                    bottom: '0%',
                    containLabel: true
                },
                xAxis: [{
                    show: false,
                }],
                yAxis: [{
                    axisTick: 'none',
                    axisLine: 'none',
                    offset: '20',
                    axisLabel: {
                        textStyle: {
                            color: '#ffffff',
                            fontSize: '10',
                        }
                    },
                    data: nation,
                }, {
                    axisTick: 'none',
                    axisLine: 'none',
                    axisLabel: {
                        textStyle: {
                            color: '#ffffff',
                            fontSize: '10',
                        }
                    },
                    data: [],
                }],
                series: [{
                        name: '条',
                        type: 'bar',
                        yAxisIndex: 0,
                        data: addConfirm,
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                textStyle: {
                                    color: '#ffffff',
                                    fontSize: '10',
                                }
                            }
                        },
                        barWidth: 8,
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    var num = myColor.length;
                                    return myColor[params.dataIndex % num]
                                },
                                barBorderRadius: 5,
                            }
                        },
                        z: 2
                    // }, {
                    //     name: '白框',
                    //     type: 'bar',
                    //     yAxisIndex: 1,
                    //     barGap: '-100%',
                    //     data: [99, 99, 99, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5],
                    //     barWidth: 10,
                    //     itemStyle: {
                    //         normal: {
                    //             color: '#0e2147',
                    //             barBorderRadius: 7,
                    //         }
                    //     },
                    //     z: 1
                    // }, {
                    //     name: '外框',
                    //     type: 'bar',
                    //     yAxisIndex: 1,
                    //     // barGap: '-100%',
                    //     data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
                    //     barWidth: 20,
                    //     itemStyle: {
                    //         normal: {
                    //             color: function(params) {
                    //                 var num = myColor.length;
                    //                 return myColor[params.dataIndex % num]
                    //             },
                    //             barBorderRadius: 7,
                    //         }
                    //     },
                    //     z: 1
                    },
                ]
            };
            myChart.setOption(option);
        },
        // 世界每周新增治愈和死亡人数
        getFive(){
            var myChart = echarts.init(document.getElementById('main5'));
            let newArr = [] //首先创建一个新的空数组。用来存放分割好的数组
            let num = 7;  //需要几个为一组
            for (let i = 0; i < this.globalDailyHistory.length;) { //注意：这里与for循环不太一样的是，没有i++
                newArr.push(this.globalDailyHistory.slice(i, i += num));
            }
            var date = [];
            var heal = [];
            var dead = [];
            // console.log(newArr);
            newArr.forEach((item) => {
                date.push(item[0].date)
                var sum = 0;
                var sum2 = 0;
                item.forEach(it => {   //单天
                    // console.log(it);
                    sum += it.all.heal;
                    sum2 += it.all.dead;
                });
                // console.log(sum);
                heal.push(sum);
                dead.push(sum2);
            })
            // console.log(heal,dead,date);
            // console.log(newArr);
            var option = {
            title: {
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: 16,
                    color: '#F1F1F3'
                },
                left: '6%'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: '#57617B'
                    }
                }
            },
            legend: {
                icon: 'rect',
                itemWidth: 14,
                itemHeight: 5,
                itemGap: 13,
                data: ['治愈', '死亡'],
                right: '4%',
                textStyle: {
                    fontSize: 12,
                    color: '#F1F1F3'
                }
            },
            grid: {
                left: '3%',
                // right: '4%',
                bottom: '5%',
                top:'15%',
                width:'100%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                axisLine: {
                    lineStyle: {
                        color: '#57617B'
                    }
                },
                data: date
            }, {
                axisPointer: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#57617B'
                    }
                },
                axisTick: {
                    show: false
                },
            }],
            yAxis: [{
                type: 'value',
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#57617B'
                    }
                },
                axisLabel: {
                    margin: 5,
                    textStyle: {
                        fontSize: 10
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#57617B'
                    }
                }
            }],
            series: [{
                name: '治愈',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        width: 1
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(0, 136, 212, 0.3)'
                        }, {
                            offset: 0.8,
                            color: 'rgba(0, 136, 212, 0)'
                        }], false),
                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                        shadowBlur: 10
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'rgb(0,136,212)',
                        borderColor: 'rgba(0,136,212,0.2)',
                        borderWidth: 12

                    }
                },
                data: heal
            }, {
                name: '死亡',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        width: 1
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(219, 50, 51, 0.3)'
                        }, {
                            offset: 0.8,
                            color: 'rgba(219, 50, 51, 0)'
                        }], false),
                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                        shadowBlur: 10
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'rgb(219,50,51)',
                        borderColor: 'rgba(219,50,51,0.2)',
                        borderWidth: 12
                    }
                },
                data: dead
            }, ]            
            };
            myChart.setOption(option);

        },
        getSix(){
            var myChart = echarts.init(document.getElementById('main6'));
            var province = [];
            this.importStatis.map((item) => {
                // console.log(item);
                province.unshift({name:item.province,value:item.importedCase});
            })
            console.log(province);
            var option = {
                color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
                grid: {
                    left: -100,
                    top: 50,
                    bottom: 10,
                    right: 10,
                    containLabel: true
                },
                polar: {},
                angleAxis: {
                    interval: 1,
                    type: 'category',
                    data: [],
                    z: 10,
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        interval: 0,
                        show: true,
                        color: "#0B4A6B",
                        margin: 8,
                        fontSize: 16
                    },
                },
                radiusAxis: {},
                series: [{
                    stack: 'a',
                    type: 'pie',
                    radius: ['20%', '80%'],
                    roseType: 'area',
                    zlevel:10,
                    label: {
                        normal: {
                            show: true,
                            formatter: province,
                            textStyle: {
                                fontSize: 12,
                            },
                            position: 'outside'
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true,
                            length: 5,
                            length2: 5,
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    data: province
                }, ]
            }
            myChart.setOption(option);
        },
    }
}
</script>
<style lang="scss" scoped>
    .index{
        width: 100vw;
        height: 100vh;
        background: url('../assets/image/bg.jpg') no-repeat;
        background-size: 100% 100%;
        box-sizing: border-box;
        header{
            width: 100vw;
            height: 80px;
            text-align: center;
            line-height: 80px;
            background: url('../assets/image/head_bg.png')  no-repeat;
            color: #fff;
            position: relative;
            border-bottom: 1px solid rgb(78, 78, 78);
            box-sizing: border-box;
            .times{
                position: absolute;
                top: 45%;
                right: 50px;
                transform: translate(0,-50%);
                color: #ccc;
            }
        }
        section{
            width: 100%;
            height: calc(100vh - 80px);
            display: flex;
            box-sizing: border-box;
            .left,.right{
                width: 25vw;
                height: calc(100vh - 80px);
                display: flex;
                flex-direction: column;
                justify-content: space-around;
            }
            .middle{
                flex: 1;
                width: 30%;
                position: relative;
                img{
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    width: 50%;
                }
                .top-box{
                    height: 30vh;
                }
                .top{
                    background: rgba(47, 62, 90, 0.568);
                    margin: 0 auto;
                    width: 49vw;
                    height: 18vh;
                    padding: 20px 28px;
                    box-sizing: border-box;
                    .card{
                        ol{
                            list-style: none;
                            display: flex;
                            flex-direction: row;
                            justify-content: space-around;
                            li{
                                padding: 0;
                            }
                        }
                    }
                }
                #map{
                    z-index: 9999;
                    flex: 2;
                    // transform: scale(1.2);
                }
                .map{
                    width: 46%;
                }
                .lbx{
                    animation: lbxAnimation 10s linear infinite;
                    width: 60%;
                }
                @keyframes lbxAnimation {
                    from{
                        transform:translate(-50%,-50%) rotate(0deg);
                    }
                    to{
                        transform:translate(-50%,-50%) rotate(360deg);
                    }
                }
                .jt{
                    animation: jtAnimation 10s linear infinite;
                }
                @keyframes jtAnimation {
                    from{
                        transform:translate(-50%,-50%) rotate(0deg);
                    }
                    to{
                        transform:translate(-50%,-50%) rotate(-360deg);
                    }
                }
            }
        }
    }
</style>